<template>
  <div>
    <h2 class="HomeTitle">最新的DDL</h2>

    <div style="padding: 10px" v-if="showProgress">
      <p class="ProgressBar" v-for="(c, index) in ddls.contents" :key="index">
        <el-tooltip :content="'所属学科 ' + c.subject + '    作业描述: ' + c.desc" placement="top" effect="dark">
            <el-progress
            :stroke-width="30"
            :percentage="c.true_precent"
            :color="barColor.customColors"
            :text-inside="true"
            >
                <span class="ProgressFont" :style="`font-size:16px;color : ${c.true_precent < 30 ? 'black' : 'white'}`">
                    {{ c.name }} ({{ c.true_precent }}%)&emsp; {{ c.caption }} <span v-if="c.CanSubmitAfterEnd" class="allowDelay">可以延期</span>
                </span>
            </el-progress>
        </el-tooltip>
        
      </p>
    </div>

    <div v-else style="padding: 10px">
      <p>
        <el-empty description="暂时没有DDL哟" :size="200" />
      </p>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, watch, computed } from "vue";
import { useStore } from "vuex";
import { get_colormap, parseRGBA } from "@/hook/colormap";
import { timeprogress } from "@/hook/format"

export default {
  name: "LastestDDL",
  setup() {
    let store = useStore();
    let curColor = computed(() => store.state.curGlobalColor);

    // TODO : 设置可调节的数值
    const displayNum = 8;

    function updateData() {
      store.dispatch("homeworkNotFinishedNum").then(function () {
        if (store.state.homework.joinedHomeworkNotFinishedNum) {
          let start = 0;
          let end = displayNum;
          // 最后一条需要在总条目之内
          end = Math.min(end, store.state.homework.joinedHomeworkNotFinishedNum);
          // 最后一条需要在100条请求条目之内
          end = Math.min(end, start + 100);
          store
            .dispatch("homeworkNotFinished", { start, end })
            .then(function () {
              if (store.state.homework.joinedHomeworkNotFinished.length > 0) {
                ddls.contents.length = 0
                for (let i = start; i < end; ++ i) {
                    let tp = timeprogress(
                        store.state.homework.joinedHomeworkNotFinished[i].CreatedAt,
                        store.state.homework.joinedHomeworkNotFinished[i].EndTime
                    )
                    ddls.contents.push({
                        name : store.state.homework.joinedHomeworkNotFinished[i].Name,
                        precent: tp.percent, 
                        true_precent: 0,
                        CanSubmitAfterEnd : store.state.homework.joinedHomeworkNotFinished[i].CanSubmitAfterEnd,
                        desc : store.state.homework.joinedHomeworkNotFinished[i].Desc,
                        subject : store.state.homework.joinedHomeworkNotFinished[i].Subject,
                        caption : tp.caption
                    })
                }
              } else {
                ElNotification({
                  title: "Oops",
                  message: "拉去初始化列表失败，错误信息: " + store.state.error,
                });
              }
            });
        } else {
          let message;
          if (store.state.homework.joinedHomeworkNotFinished == 0) {
          } else {
            message = "初始化失败！错误信息: " + store.state.error;
            ElNotification({ title: "Oops", message: message });
          }
          return;
        }
      });
    }

    onMounted(() => {
        updateData()
    })

    let ddls = reactive({
      contents: [],
    });

    setTimeout(() => {
      for (let c of ddls.contents) {
        c.true_precent = c.precent;
      }
    }, 1500);


    // 进度条颜色和全局同步
    let barColor = reactive({
      customColors: [],
      refreshcolor() {
        if (barColor.customColors.length > 0) barColor.customColors.length = 0;
        let num = 21,
          c;
        let grid = Math.floor(100 / (num - 1));
        let cur_rgb = parseRGBA(curColor.value);
        let colormaps = get_colormap(cur_rgb, num, 230);
        for (let i = 0; i < num; ++i) {
          c = colormaps[i];
          barColor.customColors.push({
            color: `rgb(${c[0]}, ${c[1]}, ${c[2]})`,
            percentage: grid * i,
          });
        }
      },
      updateColor() {
        let num = 21,
          c;
        let cur_rgb = parseRGBA(curColor.value);
        let colormaps = get_colormap(cur_rgb, num, 230);
        for (let i = 0; i < num; ++i) {
          c = colormaps[i];
          barColor.customColors[i].color = `rgb(${c[0]}, ${c[1]}, ${c[2]})`;
        }
      },
    });

    barColor.refreshcolor();

    watch(curColor, () => {
      barColor.updateColor();
    });

    watch(() => [store.state.hasLogin], () => {
      updateData()
      setTimeout(() => {
        for (let c of ddls.contents) {
          c.true_precent = c.precent;
        }
      }, 1500);
    })

    let showProgress = computed(() => {
      if (ddls.contents.length > 0 && store.state.hasLogin == true)
        return true
      else 
        return false
    })

    // 整理数据
    let joinedHomeworkNotFinished = reactive({
      homework: computed(() => store.state.homework.joinedHomeworkNotFinished),
      homework_num: computed(() => store.state.homework.joinedHomeworkNotFinishedNum),
    });


    return {
      ddls,
      barColor,
      showProgress
    };
  },
};
</script>

<style scoped>
.HomeTitle {
  padding-left: 15px;
  border-left: 5px solid var(--mainColor);
}

.ProgressFont {
  font-size: 18 px;
  font-family: "Roboto Slab", serif;
}

.allowDelay {
  font-size: 15px;
  border-radius: 1.1em;
  padding: 5px;
  background-color: rgb(129, 206, 14) !important;
  color: white !important;
}
</style>